<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('实时资料知识库')" />
	<style>
		.knowledge-container {
			display: flex;
			height: calc(100vh - 200px);
			margin: 15px;
			gap: 15px;
		}
		
		.document-list {
			flex: 0 0 300px;
			background: #fff;
			border-radius: 5px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			padding: 15px;
			overflow-y: auto;
		}
		
		.preview-area {
			flex: 1;
			background: #fff;
			border-radius: 5px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			padding: 15px;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
		}
		
		.document-item {
			padding: 10px;
			border-bottom: 1px solid #eee;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		
		.document-item:hover {
			background-color: #f5f5f5;
		}
		
		.document-item.active {
			background-color: #e3f2fd;
			border-left: 3px solid #2196f3;
		}
		
		.document-title {
			font-weight: bold;
			margin-bottom: 5px;
			color: #333;
		}
		
		.document-meta {
			font-size: 12px;
			color: #999;
		}
		
		.preview-content {
			flex: 1;
			min-height: 400px;
		}
		
		.preview-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			color: #999;
			font-size: 16px;
		}
		
		.pdf-viewer {
			width: 100%;
			height: 100%;
			min-height: 600px;
			border: none;
		}
		
		.search-collapse {
			background: #fff;
			padding: 15px;
			border-radius: 5px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			margin-bottom: 15px;
		}
		
		.select-list ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		.select-list li {
			margin-right: 20px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
		}
		
		.select-list label {
			margin-right: 8px;
			white-space: nowrap;
		}
		
		.select-list input, .select-list select {
			width: 150px;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								<label>资料标题：</label>
								<input type="text" name="title"/>
							</li>
							<li>
								<label>来源：</label>
								<input type="text" name="source"/>
							</li>
							<li>
								<label>内容类型：</label>
								<select name="contentType">
									<option value="">所有</option>
									<option value="text">文本</option>
									<option value="pdf">PDF</option>
									<option value="html">网页</option>
								</select>
							</li>
							<li>
								<label>状态：</label>
								<select name="status">
									<option value="">所有</option>
									<option value="1">启用</option>
									<option value="0">禁用</option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchDocuments()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
			<div class="btn-group-sm" id="toolbar" role="group" style="padding: 0 15px;">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="dj:realtime:material:add">
					<i class="fa fa-plus"></i> 新增
				</a>
				<a class="btn btn-primary single disabled" onclick="editDocument()" shiro:hasPermission="dj:realtime:material:edit">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger multiple disabled" onclick="removeDocuments()" shiro:hasPermission="dj:realtime:material:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="dj:realtime:material:export">
					<i class="fa fa-download"></i> 导出
				</a>
			</div>
			
			<div class="knowledge-container">
				<div class="document-list">
					<h5>资料目录</h5>
					<div id="documentList">
						<!-- 文档列表将通过JS动态加载 -->
					</div>
				</div>
				
				<div class="preview-area">
					<h5>预览区域</h5>
					<div id="previewContent" class="preview-content">
						<div class="preview-placeholder" id="previewPlaceholder">
							请选择左侧的资料进行预览
						</div>
						<iframe id="pdfViewer" class="pdf-viewer" style="display: none;"></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var editFlag = [[${@permission.hasPermi('dj:realtime:material:edit')}]];
		var removeFlag = [[${@permission.hasPermi('dj:realtime:material:remove')}]];
		var prefix = ctx + "dj/realtime/material";
		var currentDocuments = [];

		$(function() {
			// 初始化演示数据
			initDemoData();
			// loadDocuments();
		});
		
		// 初始化演示数据
		function initDemoData() {
			var demoDocuments = [
				{
					id: 1,
					title: "马克思主义基本原理概论",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/0/40/98/E8F1E6C142D34317A2E3D8A93D1_8E1F1B5E_1C6391F.pdf",
					readCount: 128,
					status: 1,
					publishTime: "2025-09-01",
					createTime: "2025-09-01"
				},
				{
					id: 2,
					title: "毛泽东思想和中国特色社会主义理论体系概论",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/B/05/01/8B751A494C3E17346864171F8F3_7A3E1B5E_1C6391F.pdf",
					readCount: 96,
					status: 1,
					publishTime: "2025-08-28",
					createTime: "2025-08-28"
				},
				{
					id: 3,
					title: "中国近现代史纲要",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/1/23/45/F8E1E6C142D34317A2E3D8A93D1_8E1F1B5E_1C6391F.pdf",
					readCount: 87,
					status: 1,
					publishTime: "2025-08-20",
					createTime: "2025-08-20"
				},
				{
					id: 4,
					title: "思想道德修养与法律基础",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/2/45/67/A8F1E6C142D34317A2E3D8A93D1_8E1F1B5E_1C6391F.pdf",
					readCount: 142,
					status: 1,
					publishTime: "2025-08-15",
					createTime: "2025-08-15"
				},
				{
					id: 5,
					title: "形势与政策",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/3/67/89/B8F1E6C142D34317A2E3D8A93D1_8E1F1B5E_1C6391F.pdf",
					readCount: 75,
					status: 1,
					publishTime: "2025-09-10",
					createTime: "2025-09-10"
				},
				{
					id: 6,
					title: "习近平新时期中国特色社会主义思想概论",
					source: "江南大学马列学院",
					contentType: "pdf",
					contentUrl: "https://www.jiangnan.edu.cn/__local/4/89/01/C8F1E6C142D34317A2E3D8A93D1_8E1F1B5E_1C6391F.pdf",
					readCount: 210,
					status: 1,
					publishTime: "2025-09-12",
					createTime: "2025-09-12"
				}
			];
			
			currentDocuments = demoDocuments;
			renderDocumentList(demoDocuments);
		}
		
		function loadDocuments(params = {}) {
			$.post(prefix + "/list", params, function(result) {
				currentDocuments = result.rows;
				renderDocumentList(result.rows);
			});
		}
		
		function renderDocumentList(documents) {
			var html = '';
			if (documents.length === 0) {
				html = '<div class="preview-placeholder">暂无资料</div>';
			} else {
				documents.forEach(function(doc, index) {
					html += '<div class="document-item" onclick="previewDocument(' + index + ')">';
					html += '<div class="document-title">' + doc.title + '</div>';
					html += '<div class="document-meta">';
					html += '<div>来源: ' + (doc.source || '无') + '</div>';
					html += '<div>类型: ' + (doc.contentType || '未知') + '</div>';
					html += '<div>时间: ' + (doc.publishTime || doc.createTime || '未知') + '</div>';
					html += '</div>';
					html += '</div>';
				});
			}
			$('#documentList').html(html);
		}
		
		function previewDocument(index) {
			var doc = currentDocuments[index];
			$('.document-item').removeClass('active');
			$('.document-item').eq(index).addClass('active');
			
			// 隐藏占位符
			$('#previewPlaceholder').hide();
			
			if (doc.contentType === 'pdf' && doc.contentUrl) {
				// 显示PDF预览
				$('#pdfViewer').show();
				var pdfUrl = doc.contentUrl;
				// 如果是相对路径，加上上下文路径
				if (pdfUrl.indexOf('http') !== 0 && pdfUrl.indexOf('/') === 0) {
					pdfUrl = ctx + pdfUrl;
				}
				$('#pdfViewer').attr('src', pdfUrl);
			} else {
				// 隐藏PDF查看器
				$('#pdfViewer').hide();
				// 显示占位符或文本内容
				if (doc.contentType === 'text') {
					$('#previewPlaceholder').html('<p>文本内容预览功能待完善</p>').show();
				} else if (doc.contentType === 'html') {
					$('#previewPlaceholder').html('<p>网页内容预览功能待完善</p>').show();
				} else {
					$('#previewPlaceholder').html('<p>该文件类型暂不支持预览，请下载查看</p>').show();
				}
			}
		}
		
		function searchDocuments() {
			var params = {};
			var form = $('#formId');
			params.title = form.find('input[name="title"]').val();
			params.source = form.find('input[name="source"]').val();
			params.contentType = form.find('select[name="contentType"]').val();
			params.status = form.find('select[name="status"]').val();
			loadDocuments(params);
		}
		
		function resetForm() {
			$('#formId')[0].reset();
			loadDocuments();
		}
		
		function editDocument() {
			if ($('.document-item.active').length > 0) {
				var index = $('.document-item.active').index();
				var doc = currentDocuments[index];
				$.operate.edit(doc.id);
			} else {
				$.modal.alertWarning("请先选择要修改的资料");
			}
		}
		
		function removeDocuments() {
			var selectedItems = $('.document-item.active');
			if (selectedItems.length > 0) {
				var index = selectedItems.index();
				var doc = currentDocuments[index];
				$.operate.remove(doc.id);
			} else {
				$.modal.alertWarning("请先选择要删除的资料");
			}
		}
	</script>
</body>
</html>